<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>React入门教程：从零开始构建你的第一个应用 | TechBlog</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/github.min.css">
    <style>
        :root {
            /* 亮色主题变量 */
            --bg-color: #ffffff;
            --text-color: #24292f;
            --border-color: #d0d7de;
            --card-bg: #f6f8fa;
            --header-bg: #f6f8fa;
            --accent-color: #0969da;
            --accent-hover: #0550ae;
            --code-bg: rgba(175, 184, 193, 0.2);
            --shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
            --tag-bg: #ddf4ff;
            --tag-color: #0969da;
            --filter-bg: #f6f8fa;
            --input-bg: #ffffff;
            --toc-bg: #f6f8fa;
            --progress-color: #0969da;
            --toc-active-bg: rgba(9, 105, 218, 0.1);
            --toc-active-border: #0969da;
            --step-active-bg: #0969da;
            --step-active-color: #ffffff;
            --step-completed-bg: #ddf4ff;
            --step-completed-color: #0969da;
            --exercise-bg: #f6f8fa;
            --exercise-border: #d0d7de;
            --tip-bg: #fff8c5;
            --tip-border: #d4a72c;
            --warning-bg: #ffebe9;
            --warning-border: #cf222e;
            --chapter-progress: #28a745;
            --chapter-active: #0969da;
            --chapter-completed: #28a745;
        }

        .dark-theme {
            /* 深色主题变量 */
            --bg-color: #0d1117;
            --text-color: #e6edf3;
            --border-color: #30363d;
            --card-bg: #161b22;
            --header-bg: #161b22;
            --accent-color: #2f81f7;
            --accent-hover: #1c6bdb;
            --code-bg: rgba(110, 118, 129, 0.4);
            --shadow: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.7);
            --tag-bg: #388bfd26;
            --tag-color: #58a6ff;
            --filter-bg: #161b22;
            --input-bg: #0d1117;
            --toc-bg: #161b22;
            --progress-color: #2f81f7;
            --toc-active-bg: rgba(47, 129, 247, 0.15);
            --toc-active-border: #2f81f7;
            --step-active-bg: #2f81f7;
            --step-active-color: #ffffff;
            --step-completed-bg: rgba(47, 129, 247, 0.15);
            --step-completed-color: #58a6ff;
            --exercise-bg: #161b22;
            --exercise-border: #30363d;
            --tip-bg: rgba(187, 128, 9, 0.15);
            --tip-border: #bb8009;
            --warning-bg: rgba(248, 81, 73, 0.15);
            --warning-border: #f85149;
            --chapter-progress: #3fb950;
            --chapter-active: #2f81f7;
            --chapter-completed: #3fb950;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            transition: background-color 0.3s, color 0.3s, border-color 0.3s;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
            background-color: var(--bg-color);
            color: var(--text-color);
            line-height: 1.6;
        }

        .container {
            max-width: 1280px;
            margin: 0 auto;
            padding: 0 20px;
        }

        /* 头部导航 */
        header {
            background-color: var(--header-bg);
            border-bottom: 1px solid var(--border-color);
            position: sticky;
            top: 0;
            z-index: 100;
        }

        .navbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 16px 0;
            position: relative;
        }

        .logo {
            display: flex;
            align-items: center;
            gap: 10px;
            font-weight: 600;
            font-size: 20px;
            color: var(--text-color);
            text-decoration: none;
            z-index: 101;
        }

        .logo i {
            color: var(--accent-color);
        }

        .nav-links {
            display: flex;
            gap: 24px;
        }

        .nav-links a {
            color: var(--text-color);
            text-decoration: none;
            font-size: 14px;
            font-weight: 500;
            transition: all 0.2s ease;
        }

        .nav-links a:hover {
            color: var(--accent-color);
        }

        .nav-links a.active {
            color: var(--accent-color);
            font-weight: 600;
        }

        .nav-actions {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .theme-toggle {
            background: none;
            border: 1px solid var(--border-color);
            border-radius: 6px;
            padding: 8px 12px;
            color: var(--text-color);
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 14px;
            transition: all 0.2s ease;
        }

        .theme-toggle:hover {
            background-color: var(--code-bg);
        }

        .mobile-menu {
            display: none;
            background: none;
            border: 1px solid var(--border-color);
            border-radius: 6px;
            color: var(--text-color);
            cursor: pointer;
            padding: 8px 12px;
            font-size: 16px;
            transition: all 0.2s ease;
        }

        .mobile-menu:hover {
            background-color: var(--code-bg);
        }

        /* 阅读进度条 */
        .reading-progress {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 3px;
            background: transparent;
            z-index: 99;
        }

        .reading-progress-bar {
            height: 100%;
            background: var(--progress-color);
            width: 0%;
            transition: width 0.2s ease;
        }

        /* 主要内容区域 */
        .main-content {
            display: flex;
            flex-direction: column;
            gap: 24px;
            padding: 32px 0;
        }

        /* 教程头部区域 */
        .tutorial-header {
            margin-bottom: 16px;
        }

        .tutorial-title {
            font-size: 32px;
            font-weight: 700;
            margin-bottom: 16px;
            line-height: 1.3;
        }

        .tutorial-meta {
            display: flex;
            gap: 20px;
            margin-bottom: 20px;
            font-size: 14px;
            color: var(--text-color);
            opacity: 0.8;
            flex-wrap: wrap;
        }

        .tutorial-tags {
            display: flex;
            gap: 8px;
            margin-bottom: 20px;
            flex-wrap: wrap;
        }

        .tag {
            background-color: var(--tag-bg);
            color: var(--tag-color);
            padding: 4px 10px;
            border-radius: 12px;
            font-size: 12px;
            font-weight: 500;
        }

        .difficulty {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 4px 10px;
            border-radius: 12px;
            font-size: 12px;
            font-weight: 500;
        }

        .difficulty.beginner {
            background-color: rgba(40, 167, 69, 0.1);
            color: var(--beginner-color, #28a745);
        }

        .difficulty.intermediate {
            background-color: rgba(255, 193, 7, 0.1);
            color: var(--intermediate-color, #ffc107);
        }

        .difficulty.advanced {
            background-color: rgba(220, 53, 69, 0.1);
            color: var(--advanced-color, #dc3545);
        }

        /* 内容容器 */
        .content-container {
            display: flex;
            gap: 32px;
            align-items: flex-start;
        }

        /* 教程内容区域 */
        .tutorial-content {
            flex: 1;
            min-width: 0;
            background-color: var(--card-bg);
            border: 1px solid var(--border-color);
            border-radius: 6px;
            padding: 32px;
        }

        /* 教程正文样式 */
        .tutorial-body {
            font-size: 16px;
            line-height: 1.7;
        }

        .tutorial-body h2 {
            font-size: 24px;
            font-weight: 600;
            margin: 32px 0 16px;
            padding-bottom: 8px;
            border-bottom: 1px solid var(--border-color);
        }

        .tutorial-body h3 {
            font-size: 20px;
            font-weight: 600;
            margin: 24px 0 12px;
        }

        .tutorial-body p {
            margin-bottom: 16px;
        }

        .tutorial-body ul,
        .tutorial-body ol {
            margin-bottom: 16px;
            padding-left: 24px;
        }

        .tutorial-body li {
            margin-bottom: 8px;
        }

        .tutorial-body blockquote {
            border-left: 4px solid var(--accent-color);
            padding-left: 16px;
            margin: 20px 0;
            font-style: italic;
            background-color: var(--code-bg);
            padding: 16px;
            border-radius: 0 6px 6px 0;
        }

        /* 代码块样式 */
        .dark-theme .tutorial-body pre {
            background-color: #0d1117;
        }

        .tutorial-body pre {
            background-color: var(--code-bg);
            border-radius: 6px;
            padding: 16px;
            overflow-x: auto;
            margin: 20px 0;
            font-size: 14px;
            border: 1px solid var(--border-color);
        }

        .tutorial-body code {
            font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
            background-color: var(--code-bg);
            padding: 2px 6px;
            border-radius: 4px;
            font-size: 14px;
        }

        .tutorial-body pre code {
            background: none;
            padding: 0;
        }

        .tutorial-body img {
            max-width: 100%;
            height: auto;
            border-radius: 6px;
            margin: 20px 0;
            border: 1px solid var(--border-color);
        }

        .tutorial-body table {
            width: 100%;
            border-collapse: collapse;
            margin: 20px 0;
        }

        .tutorial-body th,
        .tutorial-body td {
            padding: 12px;
            text-align: left;
            border-bottom: 1px solid var(--border-color);
        }

        .tutorial-body th {
            background-color: var(--code-bg);
            font-weight: 600;
        }

        /* 步骤导航 */
        .steps-navigation {
            display: flex;
            justify-content: space-between;
            margin: 40px 0;
            padding: 20px 0;
            border-top: 1px solid var(--border-color);
            border-bottom: 1px solid var(--border-color);
        }

        .step-btn {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 10px 16px;
            background-color: var(--code-bg);
            color: var(--text-color);
            text-decoration: none;
            border-radius: 6px;
            transition: all 0.2s ease;
        }

        .step-btn:hover {
            background-color: var(--accent-color);
            color: white;
        }

        .step-btn.prev {
            text-align: left;
        }

        .step-btn.next {
            text-align: right;
            margin-left: auto;
        }

        /* 步骤指示器 */
        .steps-indicator {
            display: flex;
            justify-content: center;
            margin: 30px 0;
            gap: 8px;
        }

        .step-dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background-color: var(--border-color);
            transition: all 0.3s ease;
        }

        .step-dot.active {
            background-color: var(--step-active-bg);
            transform: scale(1.2);
        }

        .step-dot.completed {
            background-color: var(--step-completed-bg);
        }

        /* 练习区域 */
        .exercise {
            background-color: var(--exercise-bg);
            border: 1px solid var(--exercise-border);
            border-radius: 6px;
            padding: 20px;
            margin: 24px 0;
        }

        .exercise-header {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 16px;
        }

        .exercise-icon {
            color: var(--accent-color);
            font-size: 18px;
        }

        .exercise-title {
            font-size: 18px;
            font-weight: 600;
        }

        .exercise-content {
            margin-bottom: 16px;
        }

        .exercise-actions {
            display: flex;
            gap: 12px;
        }

        .exercise-btn {
            padding: 8px 16px;
            border: 1px solid var(--border-color);
            border-radius: 6px;
            background-color: var(--bg-color);
            color: var(--text-color);
            cursor: pointer;
            transition: all 0.2s ease;
            font-size: 14px;
        }

        .exercise-btn:hover {
            background-color: var(--accent-color);
            color: white;
            border-color: var(--accent-color);
        }

        .exercise-btn.primary {
            background-color: var(--accent-color);
            color: white;
            border-color: var(--accent-color);
        }

        .exercise-btn.primary:hover {
            background-color: var(--accent-hover);
            border-color: var(--accent-hover);
        }

        /* 提示和警告框 */
        .tip-box,
        .warning-box {
            padding: 16px;
            border-radius: 6px;
            margin: 20px 0;
            border-left: 4px solid;
        }

        .tip-box {
            background-color: var(--tip-bg);
            border-color: var(--tip-border);
        }

        .warning-box {
            background-color: var(--warning-bg);
            border-color: var(--warning-border);
        }

        .tip-box h4,
        .warning-box h4 {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 8px;
            font-size: 16px;
        }

        /* 教程操作栏 */
        .tutorial-actions {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 30px 0;
            padding: 16px;
            background-color: var(--filter-bg);
            border: 1px solid var(--border-color);
            border-radius: 6px;
        }

        .action-buttons {
            display: flex;
            gap: 12px;
        }

        .action-btn {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 8px 16px;
            background-color: var(--code-bg);
            color: var(--text-color);
            border: 1px solid var(--border-color);
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.2s ease;
            font-size: 14px;
        }

        .action-btn:hover {
            background-color: var(--accent-color);
            color: white;
            border-color: var(--accent-color);
        }

        .action-btn.liked,
        .action-btn.bookmarked {
            background-color: var(--accent-color);
            color: white;
            border-color: var(--accent-color);
        }

        .share-options {
            display: flex;
            gap: 8px;
        }

        .share-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background-color: var(--code-bg);
            color: var(--text-color);
            border: none;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .share-btn:hover {
            background-color: var(--accent-color);
            color: white;
        }

        /* 章节导航区域 - 新设计 */
        .chapters-container {
            width: 320px;
            flex-shrink: 0;
            position: sticky;
            top: 100px;
            max-height: calc(100vh - 140px);
            overflow-y: auto;
            background-color: var(--card-bg);
            border: 1px solid var(--border-color);
            border-radius: 6px;
        }

        .chapters-header {
            padding: 20px;
            border-bottom: 1px solid var(--border-color);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .chapters-title {
            font-size: 18px;
            font-weight: 600;
        }

        .progress-indicator {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 14px;
            color: var(--text-color);
            opacity: 0.8;
        }

        .progress-bar {
            width: 60px;
            height: 6px;
            background-color: var(--border-color);
            border-radius: 3px;
            overflow: hidden;
        }

        .progress-fill {
            height: 100%;
            background-color: var(--chapter-progress);
            width: 30%;
            /* 示例进度 */
        }

        .chapters-list {
            list-style: none;
            padding: 0;
        }

        .chapter-item {
            border-bottom: 1px solid var(--border-color);
        }

        .chapter-item:last-child {
            border-bottom: none;
        }

        .chapter-link {
            display: flex;
            align-items: center;
            padding: 16px 20px;
            color: var(--text-color);
            text-decoration: none;
            transition: all 0.2s ease;
            position: relative;
        }

        .chapter-link:hover {
            background-color: var(--toc-active-bg);
        }

        .chapter-link.active {
            background-color: var(--toc-active-bg);
            color: var(--accent-color);
            font-weight: 600;
        }

        .chapter-link.active::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 4px;
            background-color: var(--chapter-active);
        }

        .chapter-status {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 24px;
            height: 24px;
            border-radius: 50%;
            margin-right: 12px;
            font-size: 12px;
            background-color: var(--border-color);
            color: var(--text-color);
        }

        .chapter-link.active .chapter-status {
            background-color: var(--chapter-active);
            color: white;
        }

        .chapter-link.completed .chapter-status {
            background-color: var(--chapter-completed);
            color: white;
        }

        .chapter-link.completed .chapter-status::before {
            content: '✓';
        }

        .chapter-info {
            flex: 1;
        }

        .chapter-title {
            font-size: 14px;
            margin-bottom: 4px;
        }

        .chapter-meta {
            font-size: 12px;
            opacity: 0.7;
            display: flex;
            gap: 8px;
        }

        /* 章节内容区域 */
        .chapter-content {
            display: none;
        }

        .chapter-content.active {
            display: block;
        }

        /* 代码编辑器样式 */
        .code-editor {
            margin: 20px 0;
            border-radius: 6px;
            overflow: hidden;
            border: 1px solid var(--border-color);
        }

        .editor-header {
            background-color: var(--code-bg);
            padding: 8px 16px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid var(--border-color);
        }

        .editor-title {
            font-size: 14px;
            font-weight: 600;
        }

        .editor-actions {
            display: flex;
            gap: 8px;
        }

        .editor-btn {
            background: none;
            border: none;
            color: var(--text-color);
            cursor: pointer;
            font-size: 14px;
            padding: 4px 8px;
            border-radius: 4px;
            transition: all 0.2s ease;
        }

        .editor-btn:hover {
            background-color: rgba(0, 0, 0, 0.1);
        }

        .editor-content {
            background-color: var(--code-bg);
            padding: 16px;
            font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
            font-size: 14px;
            line-height: 1.5;
            min-height: 200px;
            outline: none;
            white-space: pre-wrap;
        }

        .editor-content:focus {
            outline: none;
        }

        /* 相关教程 */
        .related-tutorials {
            margin-top: 40px;
        }

        .section-title {
            font-size: 24px;
            font-weight: 600;
            margin-bottom: 20px;
            padding-bottom: 12px;
            border-bottom: 1px solid var(--border-color);
        }

        .related-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 20px;
        }

        .related-card {
            background-color: var(--card-bg);
            border: 1px solid var(--border-color);
            border-radius: 6px;
            padding: 20px;
            transition: border-color 0.2s ease;
        }

        .related-card:hover {
            border-color: var(--accent-color);
        }

        .related-title {
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 8px;
        }

        .related-title a {
            color: var(--accent-color);
            text-decoration: none;
        }

        .related-title a:hover {
            text-decoration: underline;
        }

        .related-meta {
            display: flex;
            gap: 12px;
            margin-bottom: 12px;
            font-size: 13px;
            opacity: 0.8;
        }

        .related-excerpt {
            font-size: 14px;
            line-height: 1.5;
        }

        /* 页脚 */
        footer {
            border-top: 1px solid var(--border-color);
            padding: 32px 0;
            text-align: center;
            font-size: 14px;
            color: var(--text-color);
            opacity: 0.8;
        }

        /* 添加GitHub深色主题的代码高亮样式 */
        .dark-theme .hljs {
            color: #c9d1d9;
            background: #0d1117;
        }

        .dark-theme .hljs-doctag,
        .dark-theme .hljs-keyword,
        .dark-theme .hljs-meta .hljs-keyword,
        .dark-theme .hljs-template-tag,
        .dark-theme .hljs-template-variable,
        .dark-theme .hljs-type,
        .dark-theme .hljs-variable.language_ {
            color: #ff7b72;
        }

        .dark-theme .hljs-title,
        .dark-theme .hljs-title.class_,
        .dark-theme .hljs-title.class_.inherited__,
        .dark-theme .hljs-title.function_ {
            color: #d2a8ff;
        }

        .dark-theme .hljs-attr,
        .dark-theme .hljs-attribute,
        .dark-theme .hljs-literal,
        .dark-theme .hljs-meta,
        .dark-theme .hljs-number,
        .dark-theme .hljs-operator,
        .dark-theme .hljs-variable,
        .dark-theme .hljs-selector-attr,
        .dark-theme .hljs-selector-class,
        .dark-theme .hljs-selector-id {
            color: #79c0ff;
        }

        .dark-theme .hljs-regexp,
        .dark-theme .hljs-string,
        .dark-theme .hljs-meta .hljs-string {
            color: #a5d6ff;
        }

        .dark-theme .hljs-built_in,
        .dark-theme .hljs-symbol {
            color: #ffa657;
        }

        .dark-theme .hljs-comment,
        .dark-theme .hljs-code,
        .dark-theme .hljs-formula {
            color: #8b949e;
        }

        .dark-theme .hljs-name,
        .dark-theme .hljs-quote,
        .dark-theme .hljs-selector-tag,
        .dark-theme .hljs-selector-pseudo {
            color: #7ee787;
        }

        .dark-theme .hljs-subst {
            color: #c9d1d9;
        }

        .dark-theme .hljs-section {
            color: #1f6feb;
            font-weight: bold;
        }

        .dark-theme .hljs-bullet {
            color: #f2cc60;
        }

        .dark-theme .hljs-emphasis {
            color: #c9d1d9;
            font-style: italic;
        }

        .dark-theme .hljs-strong {
            color: #c9d1d9;
            font-weight: bold;
        }

        .dark-theme .hljs-addition {
            color: #aff5b4;
            background-color: #033a16;
        }

        .dark-theme .hljs-deletion {
            color: #ffdcd7;
            background-color: #67060c;
        }

        /* 响应式设计优化 */
        @media (max-width: 1024px) {
            .content-container {
                gap: 24px;
            }

            .chapters-container {
                width: 280px;
            }
        }

        @media (max-width: 900px) {
            .content-container {
                flex-direction: column;
            }

            .chapters-container {
                width: 100%;
                order: -1;
                margin-bottom: 24px;
                position: static;
                max-height: none;
            }
        }

        @media (max-width: 768px) {
            .container {
                padding: 0 16px;
            }

            .navbar {
                padding: 12px 0;
            }

            .logo {
                font-size: 18px;
            }

            .nav-links {
                position: absolute;
                top: 100%;
                left: 0;
                width: 100%;
                background-color: var(--header-bg);
                border-top: 1px solid var(--border-color);
                flex-direction: column;
                padding: 16px 20px;
                display: none;
                box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            }

            .nav-links.active {
                display: flex;
            }

            .nav-links a {
                padding: 12px 0;
                border-bottom: 1px solid var(--border-color);
                font-size: 16px;
            }

            .nav-links a:last-child {
                border-bottom: none;
            }

            .mobile-menu {
                display: block;
                min-height: 44px;
                min-width: 44px;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .theme-toggle,
            .mobile-menu {
                padding: 10px 14px;
            }

            .main-content {
                padding: 24px 0;
                gap: 20px;
            }

            .content-container {
                gap: 20px;
            }

            .tutorial-title {
                font-size: 24px;
            }

            .tutorial-content {
                padding: 20px;
                overflow: hidden;
                width: 100%;
                max-width: 100%;
            }

            .tutorial-body {
                font-size: 15px;
                max-width: 100%;
                overflow-x: hidden;
                word-wrap: break-word;
            }

            .tutorial-body h2 {
                font-size: 20px;
            }

            .tutorial-body h3 {
                font-size: 18px;
            }

            .tutorial-meta {
                flex-direction: column;
                gap: 8px;
            }

            .tutorial-actions {
                flex-direction: column;
                gap: 16px;
                align-items: stretch;
            }

            .action-buttons {
                justify-content: center;
            }

            .share-options {
                justify-content: center;
            }

            .related-grid {
                grid-template-columns: 1fr;
            }

            /* 修改步骤导航为垂直布局 */
            .steps-navigation {
                flex-direction: column;
                gap: 12px;
                margin-top: 32px;
                padding-top: 20px;
            }

            .step-btn {
                max-width: 100%;
                width: 100%;
                justify-content: center;
                text-align: center;
                padding: 12px 16px;
            }

            .step-btn.prev {
                text-align: center;
                order: 1;
            }

            .step-btn.next {
                text-align: center;
                margin-left: 0;
                order: 2;
            }

            /* 调整按钮内图标位置 */
            .step-btn.prev i {
                order: 1;
                margin-right: 8px;
            }

            .step-btn.prev span {
                order: 2;
            }

            .step-btn.next i {
                order: 2;
                margin-left: 8px;
            }

            .step-btn.next span {
                order: 1;
            }

            /* 文本内容自动换行 */
            .tutorial-body p,
            .tutorial-body li,
            .tutorial-body blockquote,
            .tutorial-body h2,
            .tutorial-body h3 {
                word-wrap: break-word;
                overflow-wrap: break-word;
                hyphens: auto;
            }

            /* 代码块保持横向滚动 */
            .tutorial-body pre {
                overflow-x: auto;
                max-width: 100%;
                font-size: 13px;
                padding: 12px;
                -webkit-overflow-scrolling: touch;
            }

            /* 表格横向滚动 */
            .tutorial-body table {
                display: block;
                overflow-x: auto;
                white-space: nowrap;
                max-width: 100%;
            }

            /* 图片限制宽度 */
            .tutorial-body img {
                max-width: 100%;
                height: auto;
            }

            /* 减少移动端的动画效果 */
            * {
                transition: none;
            }

            /* 保留必要的过渡 */
            .theme-toggle,
            .mobile-menu,
            .nav-links a,
            .action-btn,
            .share-btn,
            .step-btn {
                transition: all 0.2s ease;
            }

            /* 移动端章节导航样式优化 */
            .chapter-link {
                padding: 14px 16px;
            }

            .chapter-title {
                font-size: 13px;
            }
        }

        @media (max-width: 480px) {
            .tutorial-tags {
                gap: 6px;
            }

            .container {
                padding: 0 12px;
            }

            .content-container {
                gap: 16px;
            }

            /* 小屏幕下的步骤导航按钮优化 */
            .steps-navigation {
                gap: 10px;
            }

            .step-btn {
                padding: 10px 12px;
                font-size: 14px;
            }

            /* 确保按钮文字不会太长 */
            .step-btn span {
                display: -webkit-box;
                -webkit-line-clamp: 1;
                line-clamp: 1;
                -webkit-box-orient: vertical;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            /* 小屏幕下调整图标大小 */
            .step-btn i {
                font-size: 12px;
            }
        }

        @media (max-height: 500px) and (orientation: landscape) {
            .navbar {
                padding: 8px 0;
            }

            .main-content {
                padding: 16px 0;
            }

            .tutorial-content {
                padding: 16px;
            }
        }

        /* 确保代码块在移动端不会溢出 */
        pre code {
            white-space: pre;
            word-wrap: normal;
        }
    </style>
</head>

<body class="light-theme">
    <!-- 阅读进度条 -->
    <div class="reading-progress">
        <div class="reading-progress-bar" id="progressBar"></div>
    </div>

    <header>
        <div class="container">
            <nav class="navbar">
                <a href="index.html" class="logo">
                    <i class="fas fa-code"></i>
                    TechBlog
                </a>

                <div class="nav-links">
                    <a href="index.html">首页</a>
                    <a href="article-list.html">文章</a>
                    <a href="tutorial-list.html" class="active">教程</a>
                    <a href="projects.html">项目</a>
                    <a href="about.html">关于</a>
                </div>

                <div class="nav-actions">
                    <button class="theme-toggle" id="themeToggle">
                        <i class="fas fa-moon"></i>
                        <span>深色模式</span>
                    </button>
                    <button class="mobile-menu" id="mobileMenu">
                        <i class="fas fa-bars"></i>
                    </button>
                </div>
            </nav>
        </div>
    </header>

    <div class="container">
        <main class="main-content">
            <!-- 教程头部信息 -->
            <div class="tutorial-header">
                <h1 class="tutorial-title">React入门教程：从零开始构建你的第一个应用</h1>
                <div class="tutorial-meta">
                    <span><i class="far fa-user"></i> 作者：张明</span>
                    <span><i class="far fa-calendar"></i> 发布日期：2023-10-15</span>
                    <span><i class="far fa-clock"></i> 预计学习时间：8小时</span>
                    <span><i class="far fa-eye"></i> 阅读量：2,584</span>
                </div>
                <div class="tutorial-tags">
                    <span class="difficulty beginner">初级</span>
                    <span class="tag">React</span>
                    <span class="tag">JavaScript</span>
                    <span class="tag">前端开发</span>
                    <span class="tag">Web开发</span>
                </div>
            </div>

            <div class="content-container">
                <!-- 章节导航侧边栏 -->
                <aside class="chapters-container">
                    <div class="chapters-header">
                        <h3 class="chapters-title">目录</h3>
                        <div class="progress-indicator">
                            <span>30%</span>
                            <div class="progress-bar">
                                <div class="progress-fill"></div>
                            </div>
                        </div>
                    </div>
                    <ul class="chapters-list">
                        <li class="chapter-item">
                            <a href="#chapter1" class="chapter-link active" data-chapter="1">
                                <div class="chapter-status">1</div>
                                <div class="chapter-info">
                                    <div class="chapter-title">React简介与开发环境搭建</div>
                                    <div class="chapter-meta">
                                        <span><i class="far fa-clock"></i> 30分钟</span>
                                        <span><i class="far fa-file-alt"></i> 4小节</span>
                                    </div>
                                </div>
                            </a>
                        </li>
                        <li class="chapter-item">
                            <a href="#chapter2" class="chapter-link" data-chapter="2">
                                <div class="chapter-status">2</div>
                                <div class="chapter-info">
                                    <div class="chapter-title">JSX语法与组件基础</div>
                                    <div class="chapter-meta">
                                        <span><i class="far fa-clock"></i> 45分钟</span>
                                        <span><i class="far fa-file-alt"></i> 5小节</span>
                                    </div>
                                </div>
                            </a>
                        </li>
                        <li class="chapter-item">
                            <a href="#chapter3" class="chapter-link" data-chapter="3">
                                <div class="chapter-status">3</div>
                                <div class="chapter-info">
                                    <div class="chapter-title">Props与State</div>
                                    <div class="chapter-meta">
                                        <span><i class="far fa-clock"></i> 60分钟</span>
                                        <span><i class="far fa-file-alt"></i> 6小节</span>
                                    </div>
                                </div>
                            </a>
                        </li>
                        <li class="chapter-item">
                            <a href="#chapter4" class="chapter-link completed" data-chapter="4">
                                <div class="chapter-status">4</div>
                                <div class="chapter-info">
                                    <div class="chapter-title">事件处理与条件渲染</div>
                                    <div class="chapter-meta">
                                        <span><i class="far fa-clock"></i> 50分钟</span>
                                        <span><i class="far fa-file-alt"></i> 5小节</span>
                                    </div>
                                </div>
                            </a>
                        </li>
                        <li class="chapter-item">
                            <a href="#chapter5" class="chapter-link" data-chapter="5">
                                <div class="chapter-status">5</div>
                                <div class="chapter-info">
                                    <div class="chapter-title">列表与Key</div>
                                    <div class="chapter-meta">
                                        <span><i class="far fa-clock"></i> 40分钟</span>
                                        <span><i class="far fa-file-alt"></i> 4小节</span>
                                    </div>
                                </div>
                            </a>
                        </li>
                        <li class="chapter-item">
                            <a href="#chapter6" class="chapter-link" data-chapter="6">
                                <div class="chapter-status">6</div>
                                <div class="chapter-info">
                                    <div class="chapter-title">表单处理</div>
                                    <div class="chapter-meta">
                                        <span><i class="far fa-clock"></i> 55分钟</span>
                                        <span><i class="far fa-file-alt"></i> 5小节</span>
                                    </div>
                                </div>
                            </a>
                        </li>
                        <li class="chapter-item">
                            <a href="#chapter7" class="chapter-link" data-chapter="7">
                                <div class="chapter-status">7</div>
                                <div class="chapter-info">
                                    <div class="chapter-title">组件生命周期</div>
                                    <div class="chapter-meta">
                                        <span><i class="far fa-clock"></i> 70分钟</span>
                                        <span><i class="far fa-file-alt"></i> 6小节</span>
                                    </div>
                                </div>
                            </a>
                        </li>
                        <li class="chapter-item">
                            <a href="#chapter8" class="chapter-link" data-chapter="8">
                                <div class="chapter-status">8</div>
                                <div class="chapter-info">
                                    <div class="chapter-title">Hooks入门</div>
                                    <div class="chapter-meta">
                                        <span><i class="far fa-clock"></i> 90分钟</span>
                                        <span><i class="far fa-file-alt"></i> 8小节</span>
                                    </div>
                                </div>
                            </a>
                        </li>
                    </ul>
                </aside>

                <!-- 教程内容区域 -->
                <div class="tutorial-content">
                    <!-- 第一章内容 -->
                    <section id="chapter1" class="chapter-content active">
                        <h2>第一章：React简介与开发环境搭建</h2>
                        <div class="tutorial-body">
                            <p>React是一个用于构建用户界面的JavaScript库，由Facebook开发并开源。它采用组件化的开发模式，使得构建复杂的用户界面变得更加简单和高效。</p>

                            <h3>1.1 什么是React？</h3>
                            <p>React是一个声明式、高效且灵活的JavaScript库，用于构建用户界面。它允许你通过组合小的、独立的代码片段（称为"组件"）来构建复杂的UI。</p>

                            <p>React的主要特点包括：</p>
                            <ul>
                                <li><strong>声明式设计</strong>：React使创建交互式UI变得简单。为应用的每一个状态设计简单的视图，当数据变化时，React会高效地更新和渲染正确的组件。
                                </li>
                                <li><strong>组件化</strong>：构建管理自身状态的封装组件，然后组合它们以构建复杂的UI。</li>
                                <li><strong>一次学习，随处编写</strong>：React不仅可以开发Web应用，还可以通过React Native开发移动应用。</li>
                            </ul>

                            <h3>1.2 开发环境搭建</h3>
                            <p>在开始React开发之前，我们需要搭建开发环境。首先确保你的计算机上已经安装了Node.js（版本14或更高）。</p>

                            <div class="tip-box">
                                <h4><i class="fas fa-lightbulb"></i> 提示</h4>
                                <p>你可以通过运行 <code>node --version</code> 命令来检查Node.js是否已安装。如果未安装，请访问 <a
                                        href="https://nodejs.org/" target="_blank">Node.js官网</a> 下载并安装。</p>
                            </div>

                            <p>接下来，我们将使用Create React App工具来创建一个新的React项目：</p>

                            <pre><code class="language-bash"># 使用npx创建新的React应用
npx create-react-app my-first-react-app

# 进入项目目录
cd my-first-react-app

# 启动开发服务器
npm start</code></pre>

                            <p>执行上述命令后，Create React App会自动创建一个新的React项目，并启动开发服务器。你可以在浏览器中打开
                                <code>http://localhost:3000</code> 查看你的应用。
                            </p>

                            <h3>1.3 项目结构解析</h3>
                            <p>使用Create React App创建的项目具有以下目录结构：</p>

                            <pre><code class="language-plaintext">my-first-react-app/
├── public/
│   ├── index.html
│   └── favicon.ico
├── src/
│   ├── App.js
│   ├── App.css
│   ├── index.js
│   └── index.css
├── package.json
└── README.md</code></pre>

                            <p>让我们简要了解这些文件的作用：</p>
                            <ul>
                                <li><code>public/index.html</code>：应用的HTML模板</li>
                                <li><code>src/index.js</code>：应用的入口点</li>
                                <li><code>src/App.js</code>：主要的React组件</li>
                                <li><code>package.json</code>：项目的配置和依赖信息</li>
                            </ul>

                            <h3>1.4 第一个React组件</h3>
                            <p>让我们创建一个简单的React组件来熟悉React的基本语法：</p>

                            <pre><code class="language-jsx">import React from 'react';

function Welcome() {
  return (
    &lt;div&gt;
      &lt;h1&gt;Hello, React!&lt;/h1&gt;
      &lt;p&gt;这是我的第一个React组件。&lt;/p&gt;
    &lt;/div&gt;
  );
}

export default Welcome;</code></pre>

                            <p>这个简单的组件定义了一个名为<code>Welcome</code>的函数，它返回一些JSX代码。JSX是React的一种语法扩展，它允许我们在JavaScript代码中编写类似HTML的标记。
                            </p>

                            <div class="exercise">
                                <div class="exercise-header">
                                    <i class="fas fa-pencil-alt exercise-icon"></i>
                                    <h3 class="exercise-title">练习：创建你的第一个组件</h3>
                                </div>
                                <div class="exercise-content">
                                    <p>尝试创建一个名为<code>MyComponent</code>的React组件，让它显示你的姓名和一段简短的自我介绍。</p>
                                </div>
                                <div class="exercise-actions">
                                    <button class="exercise-btn">查看答案</button>
                                    <button class="exercise-btn primary">提交练习</button>
                                </div>
                            </div>

                            <div class="steps-navigation">
                                <a href="#" class="step-btn prev">
                                    <i class="fas fa-arrow-left"></i>
                                    <span>上一章</span>
                                </a>
                                <a href="#chapter2" class="step-btn next">
                                    <span>下一章：JSX语法与组件基础</span>
                                    <i class="fas fa-arrow-right"></i>
                                </a>
                            </div>

                            <div class="steps-indicator">
                                <div class="step-dot active"></div>
                                <div class="step-dot"></div>
                                <div class="step-dot"></div>
                                <div class="step-dot"></div>
                            </div>
                        </div>
                    </section>

                    <!-- 第二章内容（占位） -->
                    <section id="chapter2" class="chapter-content">
                        <h2>第二章：JSX语法与组件基础</h2>
                        <div class="tutorial-body">
                            <p>本章将深入探讨JSX语法和React组件的基础知识。</p>
                            <!-- 第二章内容将在这里展开 -->
                        </div>
                    </section>

                    <!-- 更多章节内容... -->
                </div>
            </div>

            <!-- 教程操作栏 -->
            <div class="tutorial-actions">
                <div class="action-buttons">
                    <button class="action-btn" id="likeBtn">
                        <i class="far fa-thumbs-up"></i>
                        <span>点赞 (128)</span>
                    </button>
                    <button class="action-btn" id="bookmarkBtn">
                        <i class="far fa-bookmark"></i>
                        <span>收藏</span>
                    </button>
                    <button class="action-btn">
                        <i class="fas fa-download"></i>
                        <span>下载PDF</span>
                    </button>
                </div>
                <div class="share-options">
                    <button class="share-btn">
                        <i class="fab fa-twitter"></i>
                    </button>
                    <button class="share-btn">
                        <i class="fab fa-facebook-f"></i>
                    </button>
                    <button class="share-btn">
                        <i class="fab fa-linkedin-in"></i>
                    </button>
                    <button class="share-btn">
                        <i class="fas fa-link"></i>
                    </button>
                </div>
            </div>

            <!-- 相关教程 -->
            <div class="related-tutorials">
                <h2 class="section-title">相关教程</h2>
                <div class="related-grid">
                    <div class="related-card">
                        <h3 class="related-title"><a href="#">JavaScript ES6+ 新特性详解</a></h3>
                        <div class="related-meta">
                            <span><i class="far fa-clock"></i> 6小时</span>
                            <span><i class="fas fa-signal"></i> 中级</span>
                        </div>
                        <p class="related-excerpt">深入讲解ES6及之后版本JavaScript的新特性，包括箭头函数、解构赋值、Promise等。</p>
                    </div>
                    <div class="related-card">
                        <h3 class="related-title"><a href="#">React Hooks 深入解析</a></h3>
                        <div class="related-meta">
                            <span><i class="far fa-clock"></i> 5小时</span>
                            <span><i class="fas fa-signal"></i> 中级</span>
                        </div>
                        <p class="related-excerpt">全面掌握React Hooks的使用方法，包括useState、useEffect、自定义Hooks等。</p>
                    </div>
                    <div class="related-card">
                        <h3 class="related-title"><a href="#">React Router 路由管理</a></h3>
                        <div class="related-meta">
                            <span><i class="far fa-clock"></i> 3小时</span>
                            <span><i class="fas fa-signal"></i> 初级</span>
                        </div>
                        <p class="related-excerpt">学习如何在React应用中实现页面路由和导航功能。</p>
                    </div>
                </div>
            </div>
        </main>
    </div>

    <footer>
        <div class="container">
            <p>&copy; 2023 TechBlog. 保留所有权利。</p>
        </div>
    </footer>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/highlight.min.js"></script>
    <script>
        // 初始化代码高亮
        document.addEventListener('DOMContentLoaded', function () {
            hljs.highlightAll();
        });

        // 主题切换功能
        const themeToggle = document.getElementById('themeToggle');
        const themeIcon = themeToggle.querySelector('i');
        const themeText = themeToggle.querySelector('span');

        // 检查本地存储的主题偏好
        const currentTheme = localStorage.getItem('theme') || 'light';
        if (currentTheme === 'dark') {
            document.body.classList.add('dark-theme');
            themeIcon.classList.remove('fa-moon');
            themeIcon.classList.add('fa-sun');
            themeText.textContent = '浅色模式';
        }

        themeToggle.addEventListener('click', () => {
            document.body.classList.toggle('dark-theme');

            if (document.body.classList.contains('dark-theme')) {
                themeIcon.classList.remove('fa-moon');
                themeIcon.classList.add('fa-sun');
                themeText.textContent = '浅色模式';
                localStorage.setItem('theme', 'dark');
            } else {
                themeIcon.classList.remove('fa-sun');
                themeIcon.classList.add('fa-moon');
                themeText.textContent = '深色模式';
                localStorage.setItem('theme', 'light');
            }
        });

        // 移动端菜单切换
        const mobileMenu = document.getElementById('mobileMenu');
        const navLinks = document.querySelector('.nav-links');

        mobileMenu.addEventListener('click', function () {
            navLinks.classList.toggle('active');
        });

        // 阅读进度条
        window.addEventListener('scroll', function () {
            const winHeight = window.innerHeight;
            const docHeight = document.documentElement.scrollHeight;
            const scrollTop = window.pageYOffset;
            const scrollPercent = (scrollTop / (docHeight - winHeight)) * 100;
            const progressBar = document.getElementById('progressBar');

            progressBar.style.width = scrollPercent + '%';
        });

        // 章节导航功能
        const chapterLinks = document.querySelectorAll('.chapter-link');
        const chapterContents = document.querySelectorAll('.chapter-content');

        chapterLinks.forEach(link => {
            link.addEventListener('click', function (e) {
                e.preventDefault();

                // 移除所有活动状态
                chapterLinks.forEach(l => l.classList.remove('active'));
                chapterContents.forEach(c => c.classList.remove('active'));

                // 添加当前活动状态
                this.classList.add('active');
                const chapterId = this.getAttribute('data-chapter');
                document.getElementById(`chapter${chapterId}`).classList.add('active');

                // 平滑滚动到章节顶部
                document.getElementById(`chapter${chapterId}`).scrollIntoView({
                    behavior: 'smooth'
                });
            });
        });

        // 点赞和收藏功能
        const likeBtn = document.getElementById('likeBtn');
        const bookmarkBtn = document.getElementById('bookmarkBtn');

        likeBtn.addEventListener('click', function () {
            this.classList.toggle('liked');
            const icon = this.querySelector('i');
            const span = this.querySelector('span');

            if (this.classList.contains('liked')) {
                icon.className = 'fas fa-thumbs-up';
                const currentCount = parseInt(span.textContent.match(/\d+/)[0]);
                span.textContent = `点赞 (${currentCount + 1})`;
            } else {
                icon.className = 'far fa-thumbs-up';
                const currentCount = parseInt(span.textContent.match(/\d+/)[0]);
                span.textContent = `点赞 (${currentCount - 1})`;
            }
        });

        bookmarkBtn.addEventListener('click', function () {
            this.classList.toggle('bookmarked');
            const icon = this.querySelector('i');

            if (this.classList.contains('bookmarked')) {
                icon.className = 'fas fa-bookmark';
                this.querySelector('span').textContent = '已收藏';
            } else {
                icon.className = 'far fa-bookmark';
                this.querySelector('span').textContent = '收藏';
            }
        });

        // 练习答案显示功能
        const exerciseBtns = document.querySelectorAll('.exercise-btn');

        exerciseBtns.forEach(btn => {
            btn.addEventListener('click', function () {
                if (this.textContent.includes('查看答案')) {
                    // 在实际应用中，这里会显示练习答案
                    alert('练习答案将在实际应用中显示');
                } else if (this.textContent.includes('提交练习')) {
                    // 在实际应用中，这里会处理练习提交
                    alert('练习提交功能将在实际应用中实现');
                }
            });
        });
    </script>
</body>

</html>